<template>
  <!-- 搜索 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item :label="t('myCourse.videoName')" prop="name">
        <el-input
          v-model="queryParams.name"
          :placeholder="t('common.inputText')+t('myCourse.videoName')"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" />
          {{t('table.search')}}
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" />
          {{t('table.reset')}}
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column :label="t('myCourse.videoCode')" align="center" prop="id" />
      <el-table-column :label="t('myCourse.videoName')" align="center" prop="name" />
      <el-table-column :label="t('myCourse.duration')" align="center" prop="duration">
        <template #default="scope">
          {{ formatDuration(scope.row.duration) }}
        </template>
      </el-table-column>
      <el-table-column :label="t('myCourse.courseName')" align="center" prop="courseName">
        <template #default="scope">
          <el-link type="primary" @click="goDetail(scope.row.courseId)">{{ scope.row.courseName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        :label="t('table.createTime')"
        align="center"
        prop="createTime"
        width="120"
        :formatter="dateFormatter"
      />
      <el-table-column
        :label="t('myCourse.finishTime')"
        align="center"
        prop="finishTime"
        width="120"
        :formatter="dateFormatter"
      />
      <el-table-column :label="t('myCourse.progress')" align="center" prop="progress">
        <template #default="scope">
          <el-progress :percentage="getProgress(scope.row.status, scope.row.progress)" />
        </template>
      </el-table-column>
      <el-table-column :label="t('myCourse.SynthesisTime')" align="center">
        <template #default="scope">
          {{ calculateDuration(scope.row.createTime, scope.row.finishTime) }}
        </template>
      </el-table-column>
      <el-table-column :label="t('myCourse.errorReason')" align="center" prop="errorReason">
        <template #default="scope">
          <el-tooltip :content="scope.row.errorReason || '--'" placement="top">
            <span>
              {{ scope.row.errorReason ? (scope.row.errorReason.length > 20 ? scope.row.errorReason.slice(0, 20) + '...' : scope.row.errorReason) : '--' }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="t('myCourse.status')" align="center" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.VIDEO_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column :label="t('table.action')" align="center" min-width="110" fixed="right">
        <template #default="scope">
          <template v-if="scope.row.status == 2">
            <el-button
              link
              type="primary"
              @click="openPreview(scope.row)"
            >
              {{t('myCourse.preview')}}
            </el-button>
            <el-button
              link
              type="primary"
              @click="handleDownload(scope.row.previewUrl,scope.row.courseName)"
            >
              {{t('myCourse.downloadVideo')}}
            </el-button>
            <el-button
              v-if="scope.row.subtitlesUrl"
              link
              type="primary"
              @click="handleDownload(scope.row.subtitlesUrl,scope.row.courseName)"
            >
              {{t('myCourse.downloadSubtitles')}}
            </el-button>
          </template>
          <template v-if=" scope.row.status == 3">
            <el-button
              link
              type="warning"
              @click="reMegerMedia(scope.row.id)"
            >
              {{t('myCourse.resynthesize')}}
            </el-button>
          </template>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            {{ t('action.del') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <!-- 视频播放弹框 -->
  <videoDialog ref="videoRef" />
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as pptTemplateApi from '@/api/pptTemplate'
import { useRouter } from 'vue-router'
import videoDialog from "./videoDialog.vue"
const router = useRouter() // 路由
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  name: undefined
})
const queryFormRef = ref() // 搜索的表单

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await pptTemplateApi.myCourseList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 预览按钮*/
const videoRef = ref()
const openPreview = (row) => {
  if(row){
    videoRef.value.open(row.previewUrl, row.subtitlesVttUrl);
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await pptTemplateApi.deleteMyCourse(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 下载按钮操作 */
const handleDownload = (url, courseName) => {
  //如果url为空，则提示未找到资源文件
  if (!url) {
    message.warning("未找到资源文件！");
    return;
  }
  const link = document.createElement('a');
  link.href = url;
  link.download = courseName;
  link.target = '_blank'; // 强制新标签页下载
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
const goDetail = (id) => {
  pptTemplateApi.coursesDetail(id).then((res) => {
    if (!res) {
      message.warning('关联课件视频或口播视频被删除')
      return
    }
    if (res.pageMode === 2 || res.pageMode === 0) {
      router.push({ path: '/chooseTemplate/index', query: { id } });
    } else if (res.pageMode === 3) {
      router.push({ path: '/chooseTemplate/speakvideo', query: { id } });
    }
  })
}

/** 格式化视频时长 */
const formatDuration = (milliseconds: number) => {
  const seconds = Math.floor(milliseconds / 1000);
  const hrs = Math.floor(seconds / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  return `${hrs > 0 ? `${hrs}时` : ''}${mins > 0 ? `${mins}分` : ''}${secs}秒`;
}

/** 重新合成按钮操作 */
const reMegerMedia = async (id: number) => {
  try {
    // 开启 loading
    loading.value = true

    // 重新合成视频
    const res = await pptTemplateApi.reMegerMedia({ id });

    console.log("---------", res);
    if (res) {
      message.success("合成视频任务提交成功，请到我的视频中查看！");
    }

  } catch (error) {
    console.error(error);
  } finally {
    // 刷新列表
    getList();
    // 无论成功还是失败，都需要关闭 loading
    loading.value = false;
  }
}

/** 根据创建时间和完成时间计算合成耗时 */
const calculateDuration = (createTime: string, finishTime: string) => {
  if (!createTime || !finishTime) return '未完成';

  const start = new Date(createTime).getTime();
  const end = new Date(finishTime).getTime();

  const duration = (end - start) / 1000; // 转换为秒
  const hrs = Math.floor(duration / 3600);
  const mins = Math.floor((duration % 3600) / 60);
  const secs = Math.floor(duration % 60);

  return `${hrs > 0 ? `${hrs}时` : ''}${mins > 0 ? `${mins}分` : ''}${secs}秒`;
}

/** 获取合成进度，关联状态 */
const getProgress = (status: number, completionPercentage: number) => {
  if (status === 2) {
    return 100; // 已完成，进度固定为100%
  } else if (status === 0) {
    return 0; // 未启动，进度固定为0%
  } else {
    return completionPercentage || 0; // 合成中或合成失败，按实际进度展示
  }
}
/** 初始化 **/
onMounted(async () => {
  await getList()
})
</script>
